<template>
  <div id="comment">
    <van-tabs v-model="active">
      <van-tab
        title="相关推荐"
        class="recom"
      >
        <div
          class="recomment"
          v-for="recom in recommentdatas"
          :key="recom.id"
        >
          <p><img
              src="../../static/images/noContent.png"
              alt=""
              width="100%"
            ></p>
          <p>{{recom.name}}</p>
        </div>
      </van-tab>
      <van-tab :title="'评论'+commentdatas.length">
        <div
          class="com"
          v-for="com in commentdatas"
          :key="com.id"
        >
          <van-swipe-cell>
            <van-card
              num="2"
              price="2.00"
              :desc="com.comment_date"
              :title="com.userinfo.name"
              class="goods-card"
              thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="removeClick"
              />
            </template>
          </van-swipe-cell>
          <p style="text-indent:70px;">{{com.comment_content}}</p>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  props: ['actives'],
  data: () => ({
    active: 0,
    recommentdatas: [],
    commentdatas: [],
    flat: true,
    scrolltopfalt: false
  }),
  methods: {
    removeClick () {
      this.flat = !this.flat
    }
  },
  async created () {
    console.log(this.$route.query.id)
    const myid = this.$route.query.id
    const res = await this.$http.detail(10, 1, 25)
    console.log(res.data)
    this.recommentdatas = res.data
    const coms = await this.$http.getComments(myid)
    console.log(coms.data)
    this.commentdatas = coms.data
  },
  updated () {
    if (document.documentElement.scrollTop >= 600) {
      this.scrolltopfalt = true
    } else {
      this.scrolltopfalt = false
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .van-tab {
  width: 50vw;
}
.recom {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .recomment {
    width: 45%;
    margin-bottom: 10px;
    border: 1px solid #ccc;
  }
}
::v-deep .van-tabs__wrap {
  position: static;
}
.goods-card {
  margin: 0;
  background-color: white;
  height: 50px;
  ::v-deep .van-image__img {
    width: 50px;
    height: 50px;
  }
}
.delete-button {
  height: 100%;
}
.van-card__thumb {
  width: 50px;
}
.com {
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
</style>
